<template>
  <div class="popupMask">
    <div class="popupPenal" style="min-width: 75%;min-height: 80%;">
      <div class="popPenalTitle">
        <div class="popPenalTitleName">
          选择物资
        </div>
        <div class="popupClose" v-on:click="close">
          <el-button size="mini">关闭</el-button>
        </div>
      </div>
      <div class="penalContent">
        <div class="penalrow selectw100">
          <div class=" width100 ">
            <div class="inlineblock verticalmiddle">
              物资类型
            </div>
            <div class="inlineblock verticalmiddle informationItem" style = "width:calc(100% - 110px);">
              <el-cascader clearable :options="enableMaterTypeList" expand-trigger="hover" @change="cascaderChange" v-model="selectedOptions2"
                size="mini" style="width:100%;">
              </el-cascader>
            </div>
          </div>
        </div>
        <div class="penalrow selectw100">
          <div class=" width100 ">
            <div class="inlineblock verticalmiddle">
              物资名称
            </div>
            <div class="inlineblock verticalmiddle informationItem" style="width: calc(100% - 210px);">
              <el-input size="mini" placeholder="物资名称" v-model="enMaterialParams.materialName" @change="readEnMaterialList" clearable></el-input>

            </div>
            <el-button size="mini" type="primary" @click="fastAddMaterial" style="float:right;margin-right: 40px;" :disabled="fastAddButtonShow">快捷添加物资</el-button>
          </div>
        </div>
        <div class="penalrow selectw100" style="height:calc(100% - 96px);">
          <el-table v-if="tableShow" :data="wuzi" size='mini'  @row-dblclick="dblclick" @selection-change="handleSelectionChange"
            style="width: 100%;height:100%;" class="tableCon">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="number" min-width="100" show-overflow-tooltip label="物资编号">
            </el-table-column>
            <el-table-column prop="materialTypeName" show-overflow-tooltip label="物资类型" min-width="100">
            </el-table-column>
            <el-table-column prop="materialName" label="物资名称" show-overflow-tooltip min-width="100">
            </el-table-column>
            <el-table-column prop="batch" min-width="100" show-overflow-tooltip label="物资批号">
            </el-table-column>
            <el-table-column prop="qty" label="库存余量" min-width="80">
            </el-table-column>
            <el-table-column prop="purity" label="纯度" width="80">
            </el-table-column>
            <el-table-column prop="concentration" label="浓度" width="80">
            </el-table-column>
            <el-table-column prop="medium" label="介质" min-width="90" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="spce" label="包装规格">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="penalFooter" style="text-align: right;">
        <el-button class="penalButton" type="primary" size="mini" v-on:click="queding">添加</el-button>
        <el-button class="penalButton" size="mini" v-on:click="close">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    props: [],
    data() {
      return {
        tableShow: true,
        yesornoValue: '1',
        enableStatusValue: '1',
        options: [],
        wuzi: [],
        selectedOptions2: [],
        tableData6: [],
        multipleSelection: [],
        name: '',
        enMaterialParams: { "materialName": "", "materialType": "" }
      }
    },
    computed: {
      ...mapState(['enableMaterTypeList']),
      biaoyangTableHeight() {
        return ((window.innerHeight - 90) * 0.7 - 250)
      },
      fastAddButtonShow() {
        let count = 0;
        let allCount = 0;
        for (let i in this.enMaterialParams) {
          allCount++
          if (!!this.enMaterialParams[i]) {
            count++

          }
        }
        if (allCount == count) {
          return false
        } else {
          return true;
        }
      }
    },
    mounted() {
      this.$store.dispatch('taskCommonQuery')
      this.readEnMaterialList()
      //  this.readEnableMaterTypeList()
    },
    methods: {
      //快捷添加入库登记物资
      fastAddMaterial() {
        console.log(this.enMaterialParams)
        this.addMaterial();
      },
      // 2、(1)交互名称：添加物资
      // (2)url:technology/addMaterial.htm
      // (3)参数：
      //{
      //	"number":"No0009",
      //	"name":"物资测试1",
      //	"materialType":"WZLX2019012300007",
      //	"submitType":"1"
      //}
      addMaterial() {
        let params = {
          "number": "",
          "name": "",
          "materialType": "",
          "submitType": "1"
        }
        params.name = this.enMaterialParams.materialName
        params.materialType = this.enMaterialParams.materialType

        this.$http({
          apiUrl: 'technology/addMaterial.htm',
          method: 'post',
          params: params,
          isJson: true
        }).then(res => {
          if (res.code === 0) {
            this.$message({
              showClose: true,
              type: 'success',
              message: '添加成功！'
            })
          }
        })
        this.readEnMaterialList()
      },
      //	1、(1)交互名称：获取已启用物资列表

      readEnMaterialList() {
        this.tableShow = false;
        this.$http({
          apiUrl: 'resource/readStockAndMaterialList.htm',
          method: 'post',
          params: this.enMaterialParams,
          isJson: true
        }).then(res => {
          if (res.code === 0) {
            console.log(res)
            this.wuzi = res.data
            this.tableShow = true;
          }
        })
      },

      cascaderChange() {
        this.enMaterialParams.materialType = this.selectedOptions2[this.selectedOptions2.length - 1]
        this.readEnMaterialList()
      },
      close() {
        this.$parent.xuanzewuziShow = false;
      },
      queding() {
        this.multipleSelection.forEach(item => {
          this.$set(item, 'qty', '')
          // var numberBatch = item.number + item.batch;
          // this.$set(item, 'numberBatch',numberBatch)
          // console.log(numberBatch)
        })

        // let addArr = this.util.repeatData({ old: this.$parent.instockParams.instockdetBeanList, new: this.multipleSelection, unique: 'numberBatch' })
        let addArr = this.multipleSelection.concat(this.$parent.instockParams.instockdetBeanList)
        this.$parent.instockParams.instockdetBeanList = addArr
        this.close();
      },
      dblclick(row, column, event) {
        this.multipleSelection = [row];
        this.queding()
      },
      handleSelectionChange(val) {
        //  	console.log(val)
        this.multipleSelection = val;
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
